let currentIndex=0;
const images=document.querySelectorAll('.box-img');
const dots=document.querySelectorAll('.dot');
const leftBtn=document.querySelector('.box-left');
const rightBtn=document.querySelector('.box-right');
const autoPlayInterval=3000;
function switchImage(index){
    images[currentIndex].classList.remove('active');
    dots[currentIndex].classList.remove('active');
    currentIndex=index;
    images[currentIndex].classList.add('active');
    dots[currentIndex].classList.add('active');
}
function nextImage(){
    switchImage((currentIndex+1)%images.length);
}
function prevImage(){
    switchImage((currentIndex-1+images.length)%images.length);
}
dots.forEach(dot => {
    dot.addEventListener('click',() =>{
        switchImage(Number(dot.CDATA_SECTION_NODE.index));
    });
});
leftBtn.addEventListener('click',prevImage);
rightBtn.addEventListener('click',nextImage);
const autoPlay=setInterval(nextImage,autoPlayInterval);
const box=document.querySelector('.box');
box.addEventListener('mouseenter',() => clearInterval(autoPlay));
box.addEventListener('mouseleave',() => setInterval(nextImage,autoPlayInterval));
function playVideo(){
    const video=document.getElementById('vedio-player');
    const playBtn=document.querySelector('.play-btn');
    video.play();
    playBtn.computedStyleMap.display='none';
}
document.getElementById('video-player').addEventListener('click',function(){
    this.play();
});
document.getElementById('vedio-player').addEventListener('ended',function(){
    const playBtn=document.querySelector('.play-btn');
    playBtn.style.display="block";
})
const slides=document.querySelectorAll('.slide');
let currentSlide=0;
function showSlide(n){
    slides.forEach((slide,index)=>{
        if(index===n){
            slide.classList.add('active');
        }else{
            slide.classList.remove('active');
        }
    });
}
function nextSlide(){
    currentSlide=(currentSlide+1)%slides.length;
    showSlide(currentSlide);
}
function prevSlide(){
    currentSlide=(currentSlide-1+slides.lenght)%slides.length;
    showSlide(currentSlide);
}
setInterval(nextSlide,3000);
document.addEventListener('keydown',function(e){
    if(e.key==='ArrowLeft'){
        prevSlide();
    }else if(e.key==='ArrowRight'){
        nextSlide();
    }
});
slides.forEach((slide,index) => {
    slide.addEventListener('click',() => {
        showSlide(index);
    });
});
showSlide(0);
